import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Keyboard,
} from 'react-native';
import RootSiblings from 'react-native-root-siblings';
import Modal from 'react-native-modalbox';
import { DefaultStyles } from '~/styles/GlobalStyles';
import { adapt } from '../../utils/ScreenAdapter';
import lodash from 'lodash';

export default class Alert {
  static sibling;

  static show = ({
    title = '请设置标题',
    style = {},
    onClose = () => {},
    onConfirm = () => {},
    content = '请设置内容',
    hideCancel = false,
    isConfirmClose= true,
    closeText='取消',
    confirmText = '确定'
  }) => {
    if (Alert.sibling) {
      Alert.sibling.destroy();
    }

    let renderContent = content;

    if (lodash.isString(content)) {
      renderContent = <Text style={styles.dialogContentText}>{content}</Text>;
    } else if (lodash.isFunction(content)) {
      renderContent = content();
    }

    Keyboard.dismiss();

    Alert.sibling = new RootSiblings(
      (
        <Modal
          style={[styles.modalContainer, style]}
          isOpen={true}
          position={'center'}
          backdropColor={'#000000'}
          backdropPressToClose={false}
          swipeToClose={false}
          backdropOpacity={0.6}
          ref={m => (this.model = m)}
          onClosed={onClose}
        >
          <View style={styles.dialogContainer}>
            <View style={styles.dialogTitle}>
              <Text style={styles.dialogTitleText}>{title}</Text>
            </View>
            <View style={styles.dialogBody}>{renderContent}</View>
            <View style={styles.buttonGroup}>
              {!hideCancel && (
                <TouchableOpacity
                  onPress={() => {
                    this.model.close();
                    onClose();
                  }}
                  style={styles.button}
                >
                  <Text style={styles.cancelButtonText}>{closeText}</Text>
                </TouchableOpacity>
              )}
              <TouchableOpacity
                style={styles.button}
                onPress={() => {
                  if (isConfirmClose) {
                    this.model.close();
                    onClose();
                  }
                  onConfirm();
                }}
              >
                <Text style={styles.confirmButtonText}>{confirmText}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      )
    );
  };

  static hide = () => {
    if (Alert.sibling) {
      Alert.sibling.destroy();
    }
  };
}

const styles = StyleSheet.create({
  modalContainer: {
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialogContainer: {
    width: adapt(311),
    backgroundColor: DefaultStyles.White,
    borderRadius: 4,
    overflow: 'hidden',
  },
  buttonGroup: {
    width: '100%',
    height: adapt(48),
    flexDirection: 'row',
  },
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: adapt(48),
    borderWidth: 1,
    borderColor: DefaultStyles.Black04,
    borderBottomLeftRadius: 4,
    borderBottomRightRadius: 4,
  },
  cancelButtonText: {
    ...DefaultStyles.Regular,
    fontSize: 18,
    color: DefaultStyles.Black84,
  },
  confirmButtonText: {
    ...DefaultStyles.Medium,
    fontSize: 18,
    color: DefaultStyles.ThemeColor,
  },
  dialogBody: {
    width: '100%',
    paddingBottom: adapt(24),
    paddingHorizontal: adapt(24),
  },
  dialogTitle: {
    width: '100%',
    padding: adapt(24),
    paddingBottom: adapt(10),
    alignItems: 'center',
    justifyContent: 'center',
  },
  dialogTitleText: {
    ...DefaultStyles.Medium,
    fontSize: 18,
    color: DefaultStyles.Black84,
  },
  dialogContentText: {
    ...DefaultStyles.Regular,
    fontSize: 16,
    color: DefaultStyles.Black84,
  },
  dialogContent: {
    width: '100%',
  },
});
